<template>
  <div class="search">
    <el-tabs type="border-card">
      <el-tab-pane label="剧目" key="dramas">
        <el-row :gutter="20">
          <el-col :span="3" v-for="item in dramas" :key="item.id">
            <resource-cover :drama="item"></resource-cover>
          </el-col>
          <el-empty v-if="dramas.length === 0" description="评论区空空如也…"></el-empty>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="文章" key="blog">
        <el-empty v-if="blogs.length === 0" description="评论区空空如也…"></el-empty>
        <el-row :gutter="20">
          <el-col :span="12"  v-for="item in blogs" :key="item.id">
            <article-item :blog="item"></article-item>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {search} from "@/api/search";
import ResourceCover from "@/components/ResourceCover";
import ArticleItem from "@/components/ArticleItem";

export default {
  name: "index",
  components: {ArticleItem, ResourceCover},
  data() {
    return {
      keyword: this.$route.query.keyword,
      dramas: [],
      blogs: []
    }
  },
  methods:{
    getSearch(){
      search(this.keyword).then(response => {
        const {data} = response.data
        this.dramas = data.dramas
        this.blogs = data.blogs
      })
    }
  },
  created() {
   this.getSearch()
  }
}
</script>

<style scoped>
.search {
  min-height: 50vh;
}
</style>
